<script setup lang="ts">
import { useSlots, RendererElement, computed } from "vue"
import { useInjectButtonSize } from "./context"

type Size = 'lg'|'md'|'sm'|'xs'
export type Props = {
  size?: Size;
  disabled?: boolean;
  type?: 'primary'|'secondary'|'default'|'dashed'|'text'|'link'|'ghost'
  danger?: boolean;
  icon?: RendererElement;
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  disabled: false,
  type: 'default',
  danger: false,
  loading: false
})

const slots = useSlots()
const injectSize = computed(() => {
  // 在restTable组件中，表格内操作列按钮是链接按钮，尺寸是默认尺寸
  const excludeTypes = ['link']
  return excludeTypes.includes(props.type)
    ? props.size || 'md'
    : useInjectButtonSize(props.size || 'md')
})

const hIconTag = computed(() => {
  return props.icon?.type
})
</script>

<template>
  <button :disabled="props.disabled" :class="['pc-btn', `pc-btn-${props.type}`,`pc-btn-${injectSize}`, 'pc-flex','pc-items-center',
    {'pc-is-icon': slots.icon||props.icon||props.loading},
    {'pc-is-disabled': props.disabled},
    {'pc-is-danger': props.danger},
    {'pc-is-loading': props.loading},
  ]">
    <template v-if="props.loading">
      <h-icon-loading></h-icon-loading>
    </template>
    <template v-else>
      <slot name="icon" v-if="slots.icon"></slot>
      <template v-if="props.icon">
        <hIconTag />
      </template>
    </template>
    <span>
      <slot></slot>
    </span>
  </button>
</template>
<style scoped>
/* 默认(次级按钮) md */
.pc-btn {
  @apply pc-box-border pc-flex pc-justify-center pc-items-center;
  position: relative;
}

.pc-btn-default,
.pc-btn-secondary,
.pc-btn-dashed {
  border: 1px solid #C9CDD4;
  color: #1D2129;
  background: transparent;
}

.pc-btn-secondary {
  border: 1px solid #165dff;
  color: #165dff;
}

.pc-btn-primary {
  border: 1px solid #165dff;
  color: white;
  min-width: 80px;
  background: #165dff;
}

.pc-btn-dashed {
  border-style: dashed;
}

.pc-btn-ghost{
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

.pc-btn-md {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
  padding: 0 1rem;
}

.pc-btn-lg {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  border-radius: 8px;
  padding: 0 1rem;
}

.pc-btn-md.pc-is-icon,
.pc-btn-lg.pc-is-icon {
  padding: 0 1rem 0 12px;
}

.pc-btn-sm {
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  border-radius: 4px;
  padding: 0 12px;
}

.pc-btn-sm.pc-is-icon{
  padding: 0 12px 0 10px;
}

.pc-btn-xs {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  padding: 0 10px;
}

.pc-btn-link {
  color: #165dff;
  height: auto;
  padding: 0;
  line-height: initial;
}

.pc-btn-xs.pc-is-icon{
  padding: 0 10px 0 8px;
}

.pc-btn-primary.pc-btn-xs,
.pc-btn-primary.pc-btn-sm {
  min-width: 0;
}

.pc-btn.pc-is-icon :deep(.h-icon) {
  font-size: inherit;
  margin-right: 4px;
}

.pc-btn-lg.pc-is-icon :deep(.h-icon) {
  font-size: 20px;
}

.pc-btn-default.pc-is-icon :deep(.h-icon),
.pc-btn-dashed.pc-is-icon :deep(.h-icon) {
  color: #86909C;
}

/* 鼠标悬浮 */
.pc-btn:hover {
  @apply pc-cursor-pointer;
  animation: none;
}
.pc-btn-primary:hover {
  background: #4080FF;
  border-color: #4080FF;
}

.pc-btn-default:hover,
.pc-btn-dashed:hover {
  background: rgba(22, 93, 255, 0.1);
  border-color: #165dff;
  color: #165dff;
}

.pc-btn-secondary:hover {
  background: rgba(22, 93, 255, 0.1);
}

.pc-btn-text:hover {
  background: #F1F2F8;
}

.pc-btn-link:hover {
  color: #4080FF;
}

.pc-btn-ghost:hover {
  color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

.pc-btn-default.pc-is-icon:hover :deep(.h-icon),
.pc-btn-secondary.pc-is-icon:hover :deep(.h-icon),
.pc-btn-dashed.pc-is-icon:hover :deep(.h-icon) {
  color: #165dff;
}

/* 点击 */
.pc-btn-primary:active {
  background: #0E42D2;
  border-color: #0E42D2;
}

.pc-btn-secondary:active,
.pc-btn-default:active,
.pc-btn-dashed:active {
  background: rgba(14, 66, 210, 0.1);
  border-color: rgb(14, 66, 210);
  color: rgb(14, 66, 210);
}

.pc-is-icon.pc-btn-secondary:active :deep(.h-icon),
.pc-is-icon.pc-btn-default:active :deep(.h-icon),
.pc-is-icon.pc-btn-dashed:active :deep(.h-icon) {
  color: rgb(14, 66, 210);
}

.pc-btn-text:active {
  background: #F1F2F8;
}

.pc-btn-link:active {
  color: #4080FF;
}

/* 危险 */
.pc-btn-default.pc-is-danger,
.pc-btn-secondary.pc-is-danger,
.pc-btn-dashed.pc-is-danger {
  border-color: #F53F3F;
  color: #F53F3F;
}

.pc-btn-primary.pc-is-danger {
  background: #F53F3F;
  border-color: #F53F3F;
}

.pc-btn-link.pc-is-danger {
  color: #F53F3F;
}

.pc-btn-default.pc-is-icon.pc-is-danger :deep(.h-icon),
.pc-btn-secondary.pc-is-icon.pc-is-danger :deep(.h-icon),
.pc-btn-dashed.pc-is-icon.pc-is-danger :deep(.h-icon) {
  color: #F53F3F;
}

/* 鼠标悬浮 */
.pc-btn-primary.pc-is-danger:hover {
  background: #F76560;
  border-color: #F76560;
}

.pc-btn-default.pc-is-danger:hover,
.pc-btn-dashed.pc-is-danger:hover,
.pc-btn-secondary.pc-is-danger:hover {
  background: rgba(245, 63, 63, 0.1);
  border-color: #F53F3F;
  color: #F53F3F;
}

.pc-btn-link.pc-is-danger:hover {
  color: #F53F3F;
}

.pc-btn-default.pc-is-danger.pc-is-icon:hover :deep(.h-icon),
.pc-btn-secondary.pc-is-danger.pc-is-icon:hover :deep(.h-icon),
.pc-btn-dashed.pc-is-danger.pc-is-icon:hover :deep(.h-icon) {
  color: #F53F3F;
}

/* 点击 */
.pc-btn-primary.pc-is-danger:active {
  background: #CB2634;
  border-color: #CB2634;
}

.pc-btn-secondary.pc-is-danger:active,
.pc-btn-default.pc-is-danger:active,
.pc-btn-dashed.pc-is-danger:active {
  background: rgba(203, 38, 52, 0.1);
  border-color: #CB2634;
  color: #CB2634;
}

.pc-is-icon.pc-btn-secondary.pc-is-danger:active :deep(.h-icon),
.pc-is-icon.pc-btn-default.pc-is-danger:active :deep(.h-icon),
.pc-is-icon.pc-btn-dashed.pc-is-danger:active :deep(.h-icon) {
  color: #CB2634;
}

.pc-btn-link.pc-is-danger:active {
  color: #CB2634;
}

/* 禁用 */
.pc-btn.pc-is-disabled,
.pc-btn.pc-is-disabled.pc-is-danger {
  background: #F2F3F5;
  border-color: #C9CDD4;
  color: #86909C;
  cursor: not-allowed;
}

.pc-btn.pc-btn-text.pc-is-disabled,
.pc-btn.pc-btn-link.pc-is-disabled {
  background: transparent;
  border-color: transparent;
  color: #86909C;
}

.pc-btn.pc-btn-ghost.pc-is-disabled {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
}

.pc-btn.pc-is-disabled:active::after {
  opacity: 0;
}

/* 水波纹 */
.pc-btn::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  box-shadow: 0 0 0 8px #165dff;
  transition: 0.6s;
}

.pc-btn.pc-is-danger::after{
  box-shadow: 0 0 0 8px #CB2634;
}

.pc-btn.pc-btn-text::after {
  box-shadow: 0 0 0 8px #F1F2F8;
}

.pc-btn.pc-btn-ghost::after {
  box-shadow: 0 0 0 8px rgba(255, 255, 255);
}

.pc-btn:active::after,
.pc-btn.pc-is-dange:active::after{
  box-shadow: none;
  opacity: 0.4;
  transition: 0s; /*取消过渡*/
}

.pc-btn.pc-btn-link:active::after {
  opacity: 0;
}

/* loading旋转 */
@keyframes iconRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.pc-is-loading .h-icon {
  animation: iconRotate 2s linear infinite;
}
</style>
